﻿@page "/ChartRangeSeries"
@using DevExpress.Blazor
@inject WeatherForecastService ForecastService
<div class="demo-description">
    <h2><DemoNavLink Link="ChartRangeSeries#RangeBar" />Range Bar Series</h2>
    <p>
        This demo illustrates how to use <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartRangeBarSeries-3">Range Bar</a> series within the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChart-1">Chart</a> component.
        Range Bar series display value ranges that correspond to argument values.
        Chart data is represented as rectangles between a specified start and end value.
    </p>
</div>
<DxChart Data="@WeatherForecasts"
         CssClass="mw-1100">
    <DxChartRangeBarSeries ValueField="@((WeatherForecast i) => i.TemperatureF)" ArgumentField="@(i => i.Date.Date)" Name="Temperature, F" />
    <DxChartTooltip Enabled="true">
        @context.GetRangePoint().Render((rangePoint) =>
                    @<div style="margin: 0.75rem">
                        <div>Max: @rangePoint.EndValue</div>
                        <div>Min: @rangePoint.StartValue</div>
                    </div>
        )
    </DxChartTooltip>
</DxChart>
<CodeSnippet_Charts_RangeBarSeries />
<div class="demo-description">
    <h2><DemoNavLink Link="ChartRangeSeries#RangeArea" />Range Area Series</h2>
    <p>
        This demo illustrates how to use <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartRangeAreaSeries-3">Range Area</a> series within the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChart-1">Chart</a> component.
        Range Area series display value ranges that correspond to argument values.
        Chart data is represented as a color-filled space between the lines that displays the series start and end points.
    </p>
</div>
<DxChart Data="@WeatherForecasts"
         CssClass="mw-1100">
    <DxChartRangeAreaSeries ValueField="@((WeatherForecast i) => i.TemperatureF)" ArgumentField="@(i => i.Date.Date)" Name="Temperature, F" />
</DxChart>
<CodeSnippet_Charts_RangeAreaSeries />
@code {
    [CascadingParameter(Name = "ThemeName")] string ThemeName { get; set; }
    WeatherForecast[] WeatherForecasts;

    protected override async Task OnInitializedAsync()
    {
        WeatherForecasts = await ForecastService.GetDetailedForecastAsync();
    }
}
